<template>
	<view class="info content-20">
		<view class="info-title" >
			{{info.title}}
		</view>
		<view class="info-info" >
			<view class="">
				<text class="desc">{{info.creationTime | formatTime}}</text>
			</view>
			<button class="btn-share share" open-type="share">
				<u-icon name='share' size='25' color='#0bbf68'></u-icon>
				<text>分享</text>
			</button>
		</view>
		<view class="info-con rich-text">
			<rich-text :nodes="info.content"></rich-text>
		</view>
		<view class="wz-img" v-if="info.imgList && info.imgList.length > 0">
			<image class="img" @click="previewImg(index)" v-for="(item, index) in info.imgList" :key='index' :src="item.imgUrl" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return{
				info: {},
				id: ''
			}
		},
		
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		
		methods: {
			getInfo() {
				api.getGrowthRecordDetail({ id: this.id }, res => {
					this.info = res
				})
			},
			
			previewImg(index) {
				let urls = []
				this.info.imgList.map(item => {
					urls.push(item.imgUrl)
				})
				uni.previewImage({
					current: index,
					urls
				})
			}
		},
		
		onShareAppMessage() {
			return{
			  title: this.info.title,
			  imageUrl: this.info.coverImg,
			  path: '/pagesMain/news/newsDetail?id=' + this.info.id
			}
		}
	}
</script>

<style scoped lang="scss">
	.wz-img{
		@include flex-base;
		justify-content: space-between;
		padding-top: 20upx;
		.img{
			width: 330upx;
			height: 200upx;
			border-radius: 10upx;
		}
	}
	.info-title{
		font-size: 44upx;
	}
	.rich-text{
		font-size: $font-size-28;
		color: #333333;
		line-height: 46upx;
		text-align: justify;
	}
	.info-info{
		@include flex-base;
		justify-content: space-between;
		margin: 28upx 0 50upx 0 ;
	}
	.share{
		background-color: $bg-dark-color;
		height: 50upx;
		@include  flex-base;
		justify-content: space-between;
		color: $theme-color;
		border-radius: 50upx;
		padding: 0 20upx;
		width: 130upx;
		font-size: $font-size-26;
		font-weight: bold;
	}
</style>
